<template>
  <div class="box">
    <!-- 头部搜索 -->
    <div class="header">
      <el-row :gutter="20">
        <el-col
          :span="6"
        ><div class="grid-content bg-purple" />
          <el-form>
            <el-form-item label="订单编号" label-width="70px">
              <el-input
                v-model="queyrObj.orderNo"
                clearable
                placeholder="请输入订单编号"
              /></el-form-item></el-form></el-col>

        <el-col
          :span="12"
        ><div class="grid-content bg-purple" />
          <div class="block">
            <span class="demonstration">选择日期：</span>

            <el-date-picker
              v-model="dateSearch"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />

          </div></el-col>
        <el-col
          :span="6"
        ><div class="grid-content bg-purple" />
          <el-button
            type="primary"
            icon="el-icon-search"
            style="background-color: #5f84ff; margin-left: -60px"
            @click="seach"
          >查询</el-button>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
      </el-row>
    </div>

    <!-- 主体部分 -->
    <div class="body">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="90" :index="indexMethod" />
        <el-table-column prop="orderNo" label="订单编号" width="160" :show-overflow-tooltip="true" />
        <el-table-column prop="skuName" label="商品名称" width="160" />
        <el-table-column prop="amount" label="订单金额（元）" width="140" :formatter="timeFormatter" />
        <el-table-column prop="innerCode" label="设备编号" width="120" />
        <el-table-column label="订单状态" width="120">
          <template #default="{ row }">
            <span>{{
              row.status === 1
                ? '支付完成'
                : row.status === 2
                  ? '出货成功'
                  : '出货失败'

            }}</span>
            <!-- <span>{{
              row.status === 0
                ? '创建'
                : row.status === 1
                  ? '支付完成'
                  : row.status === 2
                    ? '出货成功'
                    : '出货失败'
            }}</span> -->
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="订单日期" width="170">
          <template #default="{ row }">
            <span>{{
              row.createTime.substring(0, 10) +
                ' ' +
                row.createTime.substring(11, 19)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="detail(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div v-if="totalPage > 1" class="com_pagination">
        <div class="left">
          <span style="font-size: 16px; color: #dbdfe5">共{{ totalCount }}条记录</span>
          <span style="font-size: 16px; color: #dbdfe5">第{{ queyrObj.pageIndex }}/{{ totalPage }}页</span>

        </div>
        <div class="right">
          <el-button
            class="btn_footer"
            size="small"
            :disabled="queyrObj.pageIndex >= totalPage"
            style="background-color: #d5ddf8"
            @click="setTablePage(1)"
          >下一页</el-button>
          <el-button
            class="btn_footer"
            size="small"
            style="background-color: #d5ddf8"
            :disabled="queyrObj.pageIndex ===1"
            @click="setTablePage(-1)"
          >上一页</el-button>
        </div>
      </div>
    </div>

    <!-- 订单详情弹窗 -->
    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="50%"
    >

      <el-row v-if="status===2" :gutter="20">
        <el-col :span="6" style="width:590px;line-height:3;;height:60px;background-color:hsla(0,0%,92.5%,.39);  position:relative;"><div class="grid-content bg-purple" />
          <img src="" alt="" class="tubiao">
          <span class="status"> {{ status===2? '出货成功':'' }}</span>
          <img src="https://likede2-admin.itheima.net/img/pic_2.3b5af41c.png" alt="" class="stateDiagram">
        </el-col>
      </el-row>

      <el-row v-else-if="status===1" :gutter="20">
        <el-col :span="6" style="width:590px;line-height:3;background-color:hsla(0,0%,92.5%,.39)"><div class="grid-content bg-purple">
          <img src="" alt="" class="tubiao">
          <span class="status"> {{ status===1? '支付完成':'' }}</span>
          <img src="https://likede2-admin.itheima.net/img/pic_2.3b5af41c.png" alt="" style="margin-left:370px">
        </div>
        </el-col>
      </el-row>

      <el-row v-else :gutter="20">
        <el-col :span="6" style="width:590px;line-height:3;background-color:hsla(0,0%,92.5%,.39)"><div class="grid-content bg-purple" />
          <img src="" alt="" class="tubiao">
          <span class="status"> {{ status===0? '未支付':'空' }}</span>
          <img src="https://likede2-admin.itheima.net/img/pic_0.979e683d.png" alt="" style="margin-left:370px">
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6" style="width:290px;line-height:3"><div class="grid-content bg-purple" />订单编号：{{ queyrObj.orderNo }}</el-col>
        <el-col :span="6" style="width:200px;line-height:3"><div class="grid-content bg-purple" />商品名称：{{ skuName }}</el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6" style="width:290px;line-height:3"><div class="grid-content bg-purple" />
          <template #default>
            <span>订单金额：</span>
            <span>{{ (fullTime.amount/100).toFixed(2) }}</span>
          </template>
        </el-col>
        <el-col :span="6" style="width:200px;line-height:3"><div class="grid-content bg-purple" />设备编号：{{ innerCode }}</el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6" style="width:290px;line-height:3"><div class="grid-content bg-purple" />
          <template #default>
            <span>创建时间：</span>
            <span>{{
              fullTime.createTime .substring(0, 10) +
                ' ' +
                fullTime.createTime .substring(11, 19)
            }}</span>
          </template>
        </el-col>
        <el-col :span="6" style="width:230px;line-height:3"><div class="grid-content bg-purple" />
          <template #default>
            <span>完成时间：</span>
            <span>{{
              fullTime.updateTime .substring(0, 10) +
                ' ' +
                fullTime.updateTime .substring(11, 19)
            }}</span>
          </template>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6" style="width:290px;line-height:3"><div class="grid-content bg-purple" />支付方式：{{ payType===1?'支付宝':'微信' }}
        </el-col>
        <el-col :span="6" style="width:200px;line-height:3"><div class="grid-content bg-purple" />设备地址:{{ regionName }}</el-col>
      </el-row>

    </el-dialog>
  </div>
</template>

<script>
import { getOrders } from '@/api/dingdan'
export default {
  name: '',

  data() {
    return {

      dialogVisible: false,
      input: '',
      value: '',
      dateSearch: [],
      queyrObj: {
        pageIndex: 1,
        pageSize: 10,
        orderNo: null, // 订单编号
        startDate: null,
        endDate: null
      },
      skuName: '', // 商品名称
      innerCode: null, // 设备编号
      amount: null, // 订单金额
      createTime: null, // 订单日期
      updateTime: null, // 完成时间
      payType: null, // 支付方式
      status: null, // 订单状态
      regionName: '', // 设备地址
      totalCount: '',
      totalPage: '',
      tableData: [],
      fullTime: '',
      timeData: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

    }
  },
  // 渲染
  created() {
    this.rendering()
  },
  methods: {
    async rendering() {
      const data = await getOrders(this.queyrObj)
      this.tableData = data.currentPageRecords
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
      this.updateTime = data.currentPageRecords.updateTime
    },

    // 序号排序
    indexMethod(index) {
      return index + this.queyrObj.pageSize * (this.queyrObj.pageIndex - 1) + 1
    },

    // 价格转化小数
    timeFormatter(row) {
      this.fullTime = row
      return parseFloat(row.amount / 100).toFixed(2)
    },

    // 查询
    seach() {
      const res = this.dateFormatting(this.dateSearch)
      this.queyrObj.startDate = res[0]
      this.queyrObj.endDate = res[1]
      this.rendering(this.queyrObj)
    },
    // 日期处理
    dateFormatting(data) {
      const arr = []
      data.join(',').split(',').forEach((item) => {
        const data = item.substring(4, 7)
        const day = item.substring(8, 10)
        const years = item.substring(11, 15)
        const month = this.timeData.findIndex((item) => item === data) + 1
        const time = years + '-' + (month < 10 ? ('0' + month) : month) + '-' + day
        arr.push(time)
      })
      return arr
    },
    // 查看详情
    detail(row) {
      this.queyrObj.orderNo = row.orderNo
      this.skuName = row.skuName
      this.innerCode = row.innerCode
      this.amount = row.amount
      this.createTime = row.createTime
      this.updateTime = row.updateTime
      this.regionName = row.regionName
      this.payType = row.payType
      this.status = row.status
      this.dialogVisible = true
    },

    // 分页
    setTablePage(value) {
      this.queyrObj.pageIndex += value
      this.rendering()
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  padding: 20px;
}
.header {
  height: 60px;
  padding: 10px 10px;
  background-color: #fff;
}
.body {
  margin-top: 20px;
  padding: 10px 10px;
  background-color: #fff;
}
.ye {
  display: flex;
  justify-content: space-between;
  margin: 10px;
}
.pages {
  display: inline-block;
  font-size: 13px;
  color: #333;
  text-align: center;
  width: 70px;
  height: 32px;
  margin: 0 16px;
  border-radius: 2px;
  border: none;
  background-color: #d5ddf8;
}
.tubiao{
  width: 26px;
  height: 26px;
  position:absolute;
  top: 20px;
  left: 15px;
}
.status{
  position:absolute;
  top: -40px;
  left: 20px;
margin-top: 50px;
margin-left:40px
}
.stateDiagram{
 position:absolute;
 top: -9px;
left: 20px;
margin-left:370px
}
.com_pagination {
 font-size: 16px;
 color: #dbdfe5 !important;
 padding: 32px 16px;
}
.btn_footer {
 float: right;
 margin-left: 10px;
 border: none;
}
</style>
